<script setup>
 import {artGetChannelsService,artDelChannelServic} from '@/api/article.js'
 import { Edit,Delete } from '@element-plus/icons-vue';
 import { ref } from 'vue';
 import ChannelEdit from './components/ChannelEdit.vue'
// loading
  const loading=ref(false)
  const channelList= ref([])
  const dialog=ref()

    const getChannelList=async()=>{
        loading.value=true //开启loading
        const res = await artGetChannelsService()
        loading.value=false //关闭loading
        channelList.value=res.data.data
        console.log(channelList.value);
    }
    getChannelList() //渲染页面
    // 删除分类
    const onDeleteChannel= async (row)=>{
        await ElMessageBox.confirm('你确认要删除分类吗','温馨提示',{
            type:'warning',
            confirmButtonText:'确认',
            cancelButtonText:'取消'
        })
        await artDelChannelServic(row.id)
        ElMessage.success('删除成功')
        getChannelList() //渲染页面
    }
    // 编辑分类
    const onAddChannel=()=>{
        dialog.value.open({})
    }
    // 添加分类
    const onEditChannel=(row)=>{
        dialog.value.open(row)
    }
    const onSuccess=()=>{
        getChannelList() //渲染页面
    }
</script>

<template>
      <page-container title="文章分类">
        <!-- 上 -->
        <template #extra>
            <el-button @click="onAddChannel">添加分类</el-button>
        </template>
        <!-- 下 -->
        <el-table v-loading="loading" :data="channelList" style="width: 100%;">
            <el-table-column type="index" label="x序号" width="100"></el-table-column>
            <el-table-column prop="cate_name" label="分类名称"></el-table-column>
            <el-table-column prop="cate_alias" label="分类别名"></el-table-column>
            <el-table-column label="操作" width="150">
                <template #default="{row,$index}">
                    <el-button circle type="primary" plain :icon="Edit" @click="onEditChannel(row,$index)"></el-button>
                    <el-button circle type="danger" plain :icon="Delete" @click="onDeleteChannel(row,$index)"></el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="没有数据" ></el-empty>
            </template>
        </el-table>
        <!-- 文章分类部分 -->
         <ChannelEdit ref="dialog" @success="onSuccess"></ChannelEdit>
    </page-container>
</template>

<style lang="scss" scoped>

</style>